<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/konva.js"></script>
</head>
<body>
<div id="containerId">

</div>
<script src="js/PieChart.js"></script>
<script>

    //1.创建舞台
    var stage = new Konva.Stage({
        width:window.innerWidth,
        height:window.innerHeight,
        container:'containerId'
    });

    //2.创建层
    var layer = new Konva.Layer();
    //将层添加舞台中
    stage.add(layer);
    // 3.造假数据
    var dataList = [
        {name : '上海',value :0.2,color : 'red'},
        {name : '北京',value :0.3,color : 'blue'},
        {name : '广州',value :0.15,color : 'yellow'},
        {name : '苏州',value :0.25,color : 'pink'},
        {name : '成都',value :0.1,color : 'green'},
    ];

    var x0 = stage.width() * 0.5;
    var y0 = stage.height() * 0.5;
    var inner_circle_r = 150;
    var outer_circle_r = 180;

    var pie = new PieChart({
       x:x0,
       y:y0,
       innerRadius:inner_circle_r,
       outerRadius:outer_circle_r,
       outerColor:"skyblue",
       outerWidth: 6,
       dataArray: dataList
    });
    pie.render(layer);
    layer.draw();
</script>
</body>
</html>